<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
      <h2 class="header-title">APIKey列表</h2>
    </div>
    <div class="table-search">
      <div class="table-search-left">
        <button *ngIf="authService.currentAppPermission.apiKey.create || authService.currentUser.admin" class="wayne-button normal"
          (click)="openModal()">
          创建APIKey
        </button>
        <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
          <wayne-checkbox-group [(ngModel)]="showList">
            <wayne-checkbox>名称</wayne-checkbox>
            <wayne-checkbox>角色</wayne-checkbox>
            <wayne-checkbox>创建时间</wayne-checkbox>
            <wayne-checkbox>过期时间</wayne-checkbox>
            <wayne-checkbox>创建者</wayne-checkbox>
            <wayne-checkbox>描述</wayne-checkbox>
            <wayne-checkbox>操作</wayne-checkbox>
          </wayne-checkbox-group>
        </wayne-filter-box>
      </div>
    </div>
    <create-edit-apikey (create)="createApiKey($event)"></create-edit-apikey>
    <list-apikey [apiKeys]="changedApiKeys"
                 (delete)="deleteApiKey($event)"
                 (edit)="editApiKey($event)"
                 (paginate)="retrieve($event)"
                 [page]="pageState.page"
                 [showState]="showState"
                 ></list-apikey>
  </div>
</div>
